<template>
    <div>
        <a-table :dataSource="orderData" :columns="columns">
            <template #shopName="{ text }">
                <span>{{ text }}</span>
            </template>
            <template #product="{ text }">
                <img :src="text.image" width="50" height="50" />
                <span>{{ text.name }}</span>
            </template>
            <template #amount="{ text }">
                <span>{{ text }}</span>
            </template>
            <template #orderNumber="{ text }">
                <span>{{ text }}</span>
            </template>
            <template #logisticsStatus="{ text }">
                <span>
                    <a-tag v-if="text === '已发货'" color="blue">{{ text }}</a-tag>
                    <a-tag v-else-if="text === '派送中'" color="green">{{ text }}</a-tag>
                    <a-tag v-else-if="text === '已签收'" color="red">{{ text }}</a-tag>
                    <a-tag v-else color="default">{{ text }}</a-tag>
                </span>
            </template>
            <template #logisticsNumber="{ text }">
                <span>{{ text }}</span>
            </template>
            <template #orderStatus="{ text }">
                <a-tag v-if="text === '已支付'" color="blue">{{ text }}</a-tag>
                <a-tag v-else-if="text === '待支付'" color="red">{{ text }}</a-tag>
                <a-tag v-else color="default">{{ text }}</a-tag>
            </template>
            <template #action="{ record }">
                <a-button type="default" @click="deleteOrder(record.key)"
                    style="height: 30px;margin-right: 10px;">删除</a-button>
                <a-button type="default" @click="contactCustomerService(4)" style="height: 30px;">联系客服</a-button>
            </template>
        </a-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCustomerStore } from '../stores/customer.js';

const columns = [
    {
        title: '店铺名字',
        dataIndex: 'shopName',
        key: 'shopName',
        align: 'center',
        //slots: { customRender: 'shopName' },
    },
    {
        title: '商品',
        dataIndex: 'product',
        key: 'product',
        align: 'center',
        //render: (record) => <img src={record} alt="" width="100px" />
        slots: { customRender: 'product' },
    },
    {
        title: '金额',
        dataIndex: 'amount',
        key: 'amount',
        align: 'center',
        //slots: { customRender: 'amount' },
    },
    {
        title: '订单号',
        dataIndex: 'orderNumber',
        key: 'orderNumber',
        align: 'center',
        //slots: { customRender: 'orderNumber' },
    },
    {
        title: '物流状态',
        dataIndex: 'logisticsStatus',
        key: 'logisticsStatus',
        align: 'center',
        //slots: { customRender: 'logisticsStatus' },
    },
    {
        title: '物流号码',
        dataIndex: 'logisticsNumber',
        key: 'logisticsNumber',
        align: 'center',
        //slots: { customRender: 'logisticsNumber' },
    },
    {
        title: '订单状态',
        dataIndex: 'orderStatus',
        key: 'orderStatus',
        align: 'center',
        //slots: { customRender: 'orderStatus' },
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        slots: { customRender: 'action' },
    },
];

const orderData = ref([
    {
        key: '1',
        shopName: '贤山石纪',
        product: { name: '[贤山石纪]精品玉雕 春日上新 暮春', image: 'https://pic.imgdb.cn/item/6640e4150ea9cb1403b05e5a.png' },
        amount: '¥120',
        orderNumber: '377889809087798',
        logisticsStatus: '已发货',
        logisticsNumber: '565689790804654554',
        orderStatus: '已支付',
        userId: 'user123',
    },
    // ...其他订单数据
]);

const router = useRouter();

const deleteOrder = (key) => {
    orderData.value = orderData.value.filter(order => order.key !== key);
};

const customerStore = useCustomerStore();
function contactCustomerService(customerId) {
    // 添加客服信息到 Store
    customerStore.addCustomer(customerId,"小新");
    // 跳转到服务页面
    router.push('/service');
}
</script>

<style scoped></style>
